.search-box{
    width: 100%;
    position: relative;
}
.search-content{
    width: 100%;
    height: 50px;
    line-height: 50px;
    position: absolute;
    top: -50px;
    left: 0;
    transform:translate3d(0,50px,0);
	animation: search-content 0.8s ease forwards;
}
@keyframes search-content
    {
    from {top:0px;}
    to {top:50px;}
    }
.search-content input{
    width: 75%;
    height: 30px;
    line-height: 30px;
    padding-left: 5%;
    /* padding-right: 5%; */
    margin-left: 5%;
    margin-right: 5%;
    border: 1px solid;
    border-radius:  5px;
}

.search-content button{
    width: 15%;
    height: 30px;
    line-height: 30px;
    background: red;
    border: 1px solid;
    border-radius:  5px;
    color: #ffffff;
}
.list-content{
    width: 100%;
}
.list-content li{
    /* position: absolute;
     top: 0;
     left: 400px; */
    /* text-align: center; */
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
    /* transform:translate3d(-400px,0,0); */
}


/* .list-content li:nth-of-type(1){
    position: absolute;
    top: 50;
    left: 400px;
    animation: list-content 0.5s ease forwards;
    animation-delay:0.3s;
}
.list-content li:nth-of-type(2){
    position: absolute;
    top: 100;
    left: 400px;
    animation: list-content 0.5s ease forwards;
    animation-delay:0.4s;
}
.list-content li:nth-of-type(3){
    position: absolute;
    top: 150;
    left: 400px;
    animation: list-content 0.5s ease forwards;
    animation-delay:0.5s;
}
@keyframes list-content
{
    from {left:0px;top: 0px;}
    to {top:100px;
        left:400px;}
}
 */



